<template>
  <div v-loading="loading">
    <TableSearch
      ref="tableSearch"
      :tableBtns="tableBtns"
      :search-path="searchPath"
      :formItemsInline="formItemsInline"
      :columns="columns"
      :tableData="tableData"
      :form="form"
      @handleTableData="handleTableData"
      @reset="reset"
    >
    </TableSearch>
    <GatewayUpdateDlg
      v-if="dlgVisible"
      :visible.sync="dlgVisible"
      :item="dlgItem"
      :options="options"
      @refresh="refresh"
    />
  </div>
</template>
<script>
import TableSearch from '@/components/TableSearch'
import GatewayUpdateDlg from './components/GatewayUpdateDlg'
import { selectGatewayPage, selectServerInfo } from '@/api/paramsSetting'
export default {
  name: 'gateway',
  components: { TableSearch, GatewayUpdateDlg },
  mounted() {
    this.getServerInfo()
  },
  data() {
    return {
      loading: false,
      dlgVisible: false,
      dlgItem: {},
      tableBtns: [],
      options: [],
      searchPath: '/web/system-management/gateway-config/查询',
      formItemsInline: [
        {
          placeholder: '请选择服务器',
          type: 'select',
          clearable: true,
          options: [],
          value: 'serverId',
        },
        {
          placeholder: '请输入设备MEI',
          type: 'text',
          clearable: true,
          value: 'deviceId',
        },
      ],
      columns: [
        {
          label: '网关IMEI号',
          prop: 'deviceId',
          resourceId: '/web/system-management/gateway-config/网关IMEI号',
        },
        {
          label: '服务器名称',
          prop: 'serverName',
          resourceId: '/web/system-management/gateway-config/服务器名称',
          formatter: (row) => {
            return row.serverName || '--'
          },
        },
        {
          label: '服务器IP',
          prop: 'serverIp',
          resourceId: '/web/system-management/gateway-config/服务器IP',
          formatter: (row) => {
            return row.serverIp || '--'
          },
        },
        {
          label: '端口号',
          prop: 'serverPort',
          resourceId: '/web/system-management/gateway-config/端口号',
          formatter: (row) => {
            return row.serverPort || '--'
          },
        },
        {
          label: '在线状态',
          prop: 'online',
          resourceId: '/web/system-management/gateway-config/在线状态',
          formatter: (row) => {
            return row.online ? '在线' : '失联'
          },
        },
        {
          label: '操作',
          buttons: [
            {
              label: '修改',
              click: (row) => {
                this.dlgVisible = true
                this.dlgItem = row
              },
              resourceId: '/web/system-management/gateway-config/修改',
            },
          ],
          resourceId: '/web/system-management/gateway-config/操作',
        },
      ],
      tableData: {},
      form: {},
    }
  },
  methods: {
    refresh() {
      this.$refs.tableSearch.refreshTable()
    },
    getServerInfo() {
      this.loading = true
      selectServerInfo()
        .then((res) => {
          if (!Array.isArray(res)) return

          let options = res.map((item) => {
            return {
              label: item.serverName,
              value: item.id,
            }
          })

          this.options = options

          this.formItemsInline = [
            {
              placeholder: '请选择服务器',
              type: 'select',
              clearable: true,
              options,
              value: 'serverId',
            },
            {
              placeholder: '请输入设备MEI',
              type: 'text',
              clearable: true,
              value: 'deviceId',
            },
          ]
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleTableData(params) {
      this.loading = true
      selectGatewayPage(params)
        .then((res) => {
          this.tableData = {
            list: res.list,
            totalCount: res.totalAmount,
          }
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    reset() {
      this.form = {}
    },
  },
}
</script>
<style lang="scss" scoped></style>
